<template>
    <div class="box">
        <div class="title">
                <i class="el-icon-s-order" style="color:#eee;"></i>
                 <span>投入品溯源</span><a2013718 class="cgx"></a2013718>
        </div>
        <div class="table" ref="table">
                        <el-table
                        size="medium"
                        :height="tableH"
                        :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase())
                        || data.date.toLowerCase().includes(search.toLowerCase()))"
                        :default-sort = "{prop: 'date', order: 'descending'}"
                        >
                        <el-table-column type="expand" size="small">
                            <template >
                                <el-form label-position="left" inline class="demo-table-expand">
                                <el-form-item label="基地:">
                                    <span>羊岭村养殖基地</span>
                                </el-form-item>
                                <el-form-item label="投入品所属仓库:">
                                    <span>饲料仓库A</span>
                                </el-form-item>
                                <el-form-item label="投入品sku：" >
                                    <span>00001</span>
                                </el-form-item>
                                <el-form-item label="投入品数量：">
                                    <span>1</span>
                                </el-form-item>
                                <el-form-item label="投入品规格：">
                                    <span>50kg/包}</span>
                                </el-form-item>
                                <el-form-item label="操作人：">
                                    <span>管理员1</span>
                                </el-form-item>
                                <el-form-item label="投入品供应商：">
                                    <span>中粮饲料(佛山)有限公司</span>
                                </el-form-item>
                                <el-form-item label="区块链高度：">
                                    <span>1.5</span>
                                </el-form-item>
                                <el-form-item label="区块链存证ID：">
                                    <span>T4hHsg5jyacC6ErVwNg8LntsYj3u5V8lLXl+aYtffskrDI</span>
                                </el-form-item>
                                </el-form>
                            </template>
                            </el-table-column>
                        <el-table-column
                        prop="name"
                        label="操作名称"
                        width="100"
                        >
                        </el-table-column>
                        <el-table-column
                        prop="address"
                        label="投入品名称"
                        :formatter="formatter">
                        </el-table-column>
                        <el-table-column
                        prop="date"
                        label="日期"
                        sortable
                        width="100"
                        >
                        </el-table-column>
                    </el-table>
                    
                </div>
    </div>
</template>
<script>
export default {
    data(){
        return{
             tableH: 0,
            tableData: [{
          date: '2016-05-01',
          name: '喂养饲料',
          address: '混合鸽饲料'
        }, {
          date: '2016-05-02',
          name: '喂养饲料',
          address: '混合鸽饲料'
        }, {
          date: '2016-05-02',
          name: '喂养饲料',
          address: '混合鸽饲料'
        }, {
          date: '2016-05-05',
          name: '喂养饲料',
          address: '混合鸽饲料'
        },{
          date: '2016-05-01',
          name: '喂养饲料',
          address: '混合鸽饲料'
        }, {
          date: '2016-05-02',
          name: '喂养饲料',
          address: '混合鸽饲料'
        }, {
          date: '2016-05-02',
          name: '喂养饲料',
          address: '混合鸽饲料'
        }, {
          date: '2016-05-05',
          name: '喂养饲料',
          address: '混合鸽饲料'
        },{
          date: '2016-05-01',
          name: '喂养饲料',
          address: '混合鸽饲料'
        }, {
          date: '2016-05-02',
          name: '喂养饲料',
          address: '混合鸽饲料'
        }, {
          date: '2016-05-02',
          name: '喂养饲料',
          address: '混合鸽饲料'
        }, {
          date: '2016-05-05',
          name: '喂养饲料',
          address: '混合鸽饲料'
        },{
          date: '2016-05-01',
          name: '喂养饲料',
          address: '混合鸽饲料'
        }, {
          date: '2016-05-02',
          name: '喂养饲料',
          address: '混合鸽饲料'
        }, {
          date: '2016-05-02',
          name: '喂养饲料',
          address: '混合鸽饲料'
        }, {
          date: '2016-05-05',
          name: '喂养饲料',
          address: '混合鸽饲料'
        },
        ],
        }
        
    },
    methods:{
        // 重置table高度
      resetHeight() {
        return new Promise((resolve, reject) => {
          this.tableH = 0
          resolve()
        })
      },
      // 设置table高度
      fetTableHeight() {
        this.resetHeight().then(res => {
          this.tableH = this.$refs.table.getBoundingClientRect().height - 25
        })
      }
    },
     mounted() {
    this.fetTableHeight();
 }
}
</script>
<style lang="scss" scoped>
    .box{
        height: 100%;
        background-color:#67C23A ;
        .title{
            height: 40px;
            text-align: center;
            // display: flex;
            width: 100%;
            font-size: 20px;
            line-height: 40px;
            background-color: #67C23A;
            color: rgba(240, 255, 255, 0.945);
            font-weight: 900;
            
        }
        .table{
            height: calc(100% - 50px);
        }
    }
</style>